'use strict';
var React = require('react');
var ReactDom=require('react-dom');
class ReDialog extends React.Component {
    /* static defaultProps= {
            title: '提示',
            ok:'确定',
            content:'默认值'
    };*/
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            isMask:false,
            isCancel:false,
            isPrompt:false,
            title: '提示',
            ok:'确定',
            content:'默认值',
            cancel:'取消',
            inputValue:''
        };
        this.getMainClass=this.getMainClass.bind(this);
        this.okAndHideDialog=this.okAndHideDialog.bind(this);
        this.cancelAndHideDialog=this.cancelAndHideDialog.bind(this);
        this.renderContent=this.renderContent.bind(this);
        this.valueChange=this.valueChange.bind(this);
        ReDialog.showDialog=ReDialog.showDialog.bind(this);
    }

    //显示弹框
    static showDialog(argNames){
        this.setState(argNames);
        this.setState({
            visible:true
        });
    }
    //确定并隐藏弹框
    okAndHideDialog(){
        this.setState({
            visible:false,
            isMask:false
        });
        if(this.state.result != undefined) {
            if (this.state.isPrompt) {
                this.state.result(this.state.inputValue);
            }
            else {
                this.state.result(true);
            }
        }
    }

    //确定并隐藏弹框
    cancelAndHideDialog(){
        this.setState({
            visible:false,
            isMask:false
        });
        if(this.state.result !=undefined){
            this.state.result(false);
        }
    }

    //弹框主样式
    getMainClass(){
        if(this.state.visible){
            return 'ReDialogBorder';
        }
        else{
            return 'ReDialogBorder HideDialog'
        }
    }

    //是否添加遮罩层
    isMask(){
        if(this.state.isMask){
            return 'ReDialogMask'
        }
        else{
            return 'ReDialogTransparent'
        }
    }

    //是否显示取消按钮
    isShowCancel(){
        if(this.state.isCancel){
            return 'ReDialogShowCancel'
        }
        else{
            return 'ReDialogHideCancel'
        }
    }

    //绑定input的值
    valueChange(event) {
        this.setState({
            inputValue:event.target.value
        });
    }

    renderContent(){
        return !this.state.isPrompt?this.state.content:<input className="ReDialogInput"  value={this.state.inputValue} onChange={this.valueChange}></input>
    }

    render() {
        var title = this.state.title;
        var content = this.state.content;
        var ok=this.state.ok;
        var cancel=this.state.cancel;
        return (
            <div className={this.isMask()}>
            <div className={this.getMainClass()}>
                <div className="ReDialogTitle">{title}</div>
                <div className="ReDialogContent">
                    {this.renderContent()}
                </div>
                <div className="ReDialogButtons">
                    <button id="ReDialogOK" onClick={this.okAndHideDialog}>{ok}</button>
                    <button id="ReDialogCancel" className={this.isShowCancel()} onClick={this.cancelAndHideDialog}>{cancel}</button>
                </div>
            </div>
            </div>
        );
    }
}

//nodejs暂不支持在class中直接定义属性，暂换成此写法，对于propTypes同理
/*ReDialog.defaultProps= {
    title: '提示',
    ok:'确定',
    content:'默认值'
};*/

module.exports=ReDialog;
